<template>
	<div class="option_echarts">
		<div class="echarts_ref" ref="echartsRef" />
	</div>
</template>

<script setup>
import { ref, nextTick, defineProps } from 'vue'
import * as echarts from 'echarts'
import { ratePixel } from '@/utils'

const props = defineProps({
	config: {
		type: Array,
		default: () => [],
	},
})

const echartsRef = ref(null)
const color = [
	new echarts.graphic.LinearGradient(0, 0, 0, 1, [
		{ offset: 0, color: '#99D3F9' },
		{ offset: 1, color: '#60A8F0' },
	]),
	new echarts.graphic.LinearGradient(0, 0, 0, 1, [
		{ offset: 0, color: '#FBD37C' },
		{ offset: 1, color: '#F7B251' },
	]),
	new echarts.graphic.LinearGradient(0, 0, 0, 1, [
		{ offset: 0, color: '#54D1BD' },
		{ offset: 1, color: '#86EEEA' },
	]),
	new echarts.graphic.LinearGradient(0, 0, 0, 1, [
		{ offset: 0, color: '#FB655A' },
		{ offset: 1, color: '#F97065' },
	]),
]
const chartInit = async () => {
	await nextTick()
	const myChart = echarts.init(echartsRef.value)
	// 绘制图表
	myChart.setOption({
		color,
		series: [
			{
				type: 'pie',
				silent: true, // 设置整个饼状图不可点击
				hoverAnimation: false,
				legendHoverLink: false,
				itemStyle: {
					normal: {
						color: '#f5f5f5',
					},
					emphasis: {
						color: '#f5f5f5',
					},
				},
				labelLine: {
					normal: {
						show: false,
					},
				},
				data: [{ value: 0, silent: true }],
				radius: ['32%', '54%'],
			},
			{
				name: 'Access From',
				type: 'pie',
				radius: ['34%', '50%'],
				avoidLabelOverlap: false,
				padAngle: ratePixel(5),
				itemStyle: {
					borderRadius: ratePixel(2),
				},
				labelLine: {
					length: ratePixel(50),
				},
				label: {
					show: true,
					position: 'outside',
					formatter: '{b|{b}}\n{d|{d}%}', // {b}: 数据项名称，{c}: 数据值，{d}: 百分比
					rich: {
						b: {
							fontSize: ratePixel(26),
							color: '#333',
							lineHeight: ratePixel(46),
							paddingTop: ratePixel(10),
							align: 'center',
						},
						d: {
							fontSize: ratePixel(24),
							color: '#666',
							lineHeight: ratePixel(28),
							paddingBottom: ratePixel(10),
							align: 'center',
						},
					},
				},
				data: props.config,
			},
		],
	})
	myChart.resize({
		width: ratePixel(630),
		height: ratePixel(480),
	})
}
chartInit()
</script>

<style lang="less" scoped>
.option_echarts {
	position: relative;
	width: 630px;
	overflow: hidden;
	height: 480px;
	// pointer-events: none;
}
</style>
